<template>
  <div class="calendar-today-view">
    
    <div class="calendar-today-view__content">
      
      <div class="calendar-today-view__content-header">
        <span class="calendar-today-view__content-header-title">
          {{$t('frameHeader.calendarTodayView.todaySchedule')}}
        </span>
        <!-- start 今日时间 -->
        <span class="calendar-today-view__content-header-text">
          {{ formatTodayText }}
        </span>
        <!-- end 今日时间 -->
      </div>
      
      <!-- start 日程数据为空显示 -->
      <div class="calendar-today-view__empty" v-if="isCalendarListEmpty" @click="onClickGoCalendarHandler">
        
        <div class="calendar-today-view__empty-img">
          <img :src="noDataImage" alt="">
        </div>
        <div class="calendar-today-view__empty-img-tip">
          {{$t('frameHeader.calendarTodayView.noSchedule')}}
        </div>
        <div class="calendar-today-view__empty-img-tip">
           {{ $t('frameHeader.calendarTodayView.clickEnter')}}
          <span class="calendar-today-view__empty-img-link link-text" @click="onClickGoCalendarHandler">
            【{{$t('common.pageTitle.pageSchedule')}}】
          </span>
        </div>
        
      </div>
      <!-- end 日程数据为空显示 -->
      
      <!-- start 日程列表 -->
      <div class="calendar-today-view__content-list" v-else>
        
        <div 
          class="calendar-today-view__content-list-item" 
          v-for="item in calendarFilterList" 
          :key="item.id" 
          @click="onClickGoCalendarItemHandler(item)"
        >
          
          <!-- start 日程颜色 -->
          <div class="calendar-today-view__content-list-item-round" :class="getCalendarTypeClassNames(item)">
          </div>
          <!-- end 日程颜色 -->
          
          <!-- start 日程时间 -->
          <div class="calendar-today-view__content-list-item-time">
            {{ item.daySpan ? $t('calendar.crossDay') : getCalendarTimePeriod(item) }}
          </div>
          <!-- end 日程时间 -->
          
          <!-- start 日程类型 -->
          <!-- <div class="calendar-today-view__content-list-item-type">
            {{ getCalendarType(item) }}
          </div> -->
          <!-- end 日程类型 -->
          
          <!-- start 日程名称 -->
          <div 
            class="calendar-today-view__content-list-item-name" 
            :class="getCalendarNameClassNames(item)"
          >
            {{ item.name }}
          </div>
          <!-- start 日程名称 -->
          
        </div>
        
        <div class="calendar-today-view__content-list-tip" @click="onClickGoCalendarHandler">
          {{$t('common.base.viewMore')}}
        </div>
        
      </div>
      <!-- end 日程列表 -->
      
    </div>
    
  </div>
</template>

<script>
/* api */
import { getWorkbenchTodayCalendar } from '@src/api/WorkbenchApi'
/* enum */
import DateFormatEnum from '@model/enum/DateFormatEnum'
/* util */
import { isEmpty } from '@src/util/type'
import { openTabCalendar, closeTabCalendar, openTabCalendarWithParams } from '@src/util/business/openTab'
import moment from 'moment'
import { formatDate } from 'pub-bbx-utils'
import i18n from '@src/locales'


const calendarTypeMap = {
  1:  i18n.t('common.base.systemKeyword.event'),
  2: i18n.t('common.base.systemKeyword.task')
}

const calendarTypeClassNameMap = {
  1: 'event',
  2: 'task',
  3: 'common'
}

import { getOssUrl } from '@src/util/assets'
const noDataImage = getOssUrl('/no_data.png')
export default {
  name: 'calendar-today-view',
  data() {
    return {
      noDataImage,
      calendarList: []
    }
  },
  computed: {
    calendarFilterList() {
      return this.calendarList.slice(0, 5).sort((a, b) => b.daySpan - a.daySpan)
    },
    isCalendarListEmpty() {
      return isEmpty(this.calendarFilterList)
    },
    formatTodayText() {
      return formatDate(moment(), 'YYYY-MM-DD dddd')
    }
  },
  methods: {
    getCalendarNameClassNames(item) {
      return {
        'calendar-today-view__content-list-item-name-cancel': item.cancel == 1
      }
    },
    onClickGoCalendarItemHandler(item) {
      // type 1是事件, 2是工单, 3是通用日程
      const { type } = item
      const params = {
        id: type == 3 ? item.agendaId : item.objId,
        startTime: moment(item.startTime).toDate().getTime(),
        endTime: moment(item.endTime).toDate().getTime(),
        type
      }
      
      this.onClickGoCalendarHandler(params)
    },
    onClickGoCalendarHandler(params) {
      closeTabCalendar()
      
      params ? openTabCalendarWithParams(params) : openTabCalendar()
      
      this.hide()
    },
    fetchWorkbenchTodayCalendar() {
      getWorkbenchTodayCalendar().then(result => {
        
        const isSuccess = result.status == 0 || result.succ || result.success;
        const data = result?.data?.map(item => {
          // type 1是事件, 2是工单, 3是通用日程:需要修改name里面的中文'工单'和'事件'（后端处理不了）
          if(item.type == 2) {
            item.name = item.name?.replace('工单', i18n.t('personal.modal.tabData.workOrder')) ?? item.name
          } else if(item.type == 1) {
            item.name = item.name?.replace('事件', i18n.t('personal.modal.tabData.event')) ?? item.name
          }
          return item;
        })
        
        this.calendarList = isSuccess ? data : []
        
        this.$nextTick(() => {
          this.$emit('input', this.calendarFilterList.length)
        })
        
      })
    },
    getCalendarTimePeriod(item) {
      
      const startTime = moment(item.startTime).format(DateFormatEnum.HM)
      const endTime = moment(item.endTime).format(DateFormatEnum.HM)
      
      return `${startTime} - ${endTime}`
    },
    getCalendarType(item) {
      return calendarTypeMap[item?.type] || ''
    },
    getCalendarTypeClassNames(item) {
      return `calendar-today-view__content-list-item-round-${calendarTypeClassNameMap[item?.type] || ''}`
    },
    hide() {
      this.$emit('hide', false)
    },
  }
}
</script>

<style lang="scss">
.calendar-panel-popper {
  width: 302px;
}

.calendar-today-view__content {

}

.calendar-today-view__content-header {
  border-bottom: 1px solid #E8E8E8;
  height: 40px;
  line-height: 40px;
  margin-bottom: 7px;
  
  &-title {
    height: 22px;
    font-size: 14px;
    font-weight: bold;
    color: $text-color-primary;
    line-height: 22px;
    display: inline-block;
    margin-right: 13px;
  }
  
  &-text {
    height: 20px;
    font-size: 12px;
    font-weight: 400;
    color: $text-color-secondary;
    line-height: 20px;
  }
  
}

.calendar-today-view__content-list-item {
  display: flex;
  align-content: center;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  
  &:hover {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 4px;
  }
  
  &-round {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 13px;
    margin-right: 8px;
    flex-shrink: 0;

    &-task {
      background-color: #4caf50 !important;
    }
    
    &-event {
      background-color: #faae14 !important;
    }
    
    &-common {
      background-color: #4caf50 !important;
    }
    
  }
  
  &-time {
    max-width: 90px;
    min-width: 86px;
    margin-right: 14px;
    flex-shrink: 0;
  }
  
  &-name {
    @include text-ellipsis();
  }
  
}

.calendar-today-view__empty {
  font-size: 12px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  padding-bottom: 28px;
  
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.calendar-today-view__content-list-tip {
  margin-top: 16px;
  height: 20px;
  font-size: 12px;
  color: #8C8C8C;
  line-height: 20px;
  text-align: center;
  color: $color-primary;
  cursor: pointer;
}

.calendar-today-view__empty-img {
  
  margin: 0 8px;
  
  img {
    width: 124px;
    height: 124px;
  }
}

.calendar-today-view__empty-img-tip {
  height: 20px;
  font-size: 14px;
  color: #8C8C8C;
  line-height: 20px;
  width: 100%;
  margin-bottom: 4px;
}

.calendar-today-view__content-list-item-name-cancel {
  text-decoration: line-through;
}

.calendar-panel-popper {
  padding-top: 0 !important;
}
</style>  